<template>
  <main-layout
    :showHome="!isFromList"
    :showBack="isFromList"
    :title="`${isEdit ? '编辑' : '新增'}供应商信息`"
  >
    <div class="edit-box">
      <van-form @submit="onSubmit">
        <!-- 基本信息 -->
        <div class="formTitle">基本信息</div>
        <van-field
          v-model="formObj.name"
          type="text"
          label="材料名字"
          placeholder="请输入材料名字"
          :rules="[{ required: true, message: '请输入材料名字' }]"
        />
        <van-field
          v-model="cityName"
          type="text"
          label="地市"
          placeholder="请选择地市"
          readonly
          :rules="[{ required: true }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#ff5b02"
              native-type="button"
              @click="cityShow = true"
              >选择地市</van-button
            >
          </template>
        </van-field>

        <van-field
          v-model="formObj.address"
          type="text"
          label="详细地址"
          placeholder="请输入详细地址"
          :rules="[{ required: true, message: '请输入详细地址' }]"
        />
        <van-field
          v-model="formObj.code"
          type="text"
          label="信用码"
          placeholder="请输入信用码"
          :rules="[{ required: true, message: '请输入信用码' }]"
        />

        <van-field
          v-model="formObj.contact"
          type="text"
          label="联系人"
          placeholder="请输入联系人"
          :rules="[{ required: true, message: '请输入联系人' }]"
        />

        <van-field
          v-model="formObj.phone"
          type="text"
          label="联系电话"
          placeholder="请输入联系电话"
          :rules="[
            { required: true, message: '请输入联系电话' },
            { pattern, message: '请输入正确的联系电话' },
          ]"
        />
        <van-field
          v-model="formObj.remark"
          type="text"
          autosize
          label="备注"
          placeholder="请输入备注"
        />

        <div style="margin: 12px 0px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="#ff5b02"
            >提交</van-button
          >
        </div>
      </van-form>
      <!-- 选择地市组件 -->
      <van-popup
        v-model="cityShow"
        round
        position="bottom"
        :close-on-click-overlay="false"
        :style="{ height: '45%' }"
      >
        <van-area
          title="选择地市"
          :area-list="areaList"
          @cancel="cityShow = false"
          @confirm="onPickCity"
        />
      </van-popup>
    </div>
  </main-layout>
</template>
<script>
import { areaList } from "@vant/area-data";
import { supplierListSaveApi, supplierUpdateApi } from "../../apis/SupplierApi";
export default {
  data() {
    return {
      areaList,
      loading: false,
      hasMore: true,
      cityShow: false,
      // 是否来自项目管理页面
      isFromList: false,
      // 是否通过编辑按钮过来
      isEdit: false,
      // 表单v-modoule
      formObj: {
        id: "",
        name: "",
        province: "",
        city: "",
        county: "",
        address: "",
        code: "",
        contact: "",
        phone: "",
        remark: "",
      },
      cityName: "",
      // 查询用户信息的查询对象
      personQuery: {
        name: "",
        page: 1,
        size: 20,
      },
      // 选择大类列表
      List: [],
      // 正则校验电话号码输入是否正确
      pattern: /^1[3-9]{1}[0-9]{9}$/,
    };
  },
  created() {
    this.isFromList = !!this.$route.query.from;
    this.isEdit = !!this.$route.query.id;
    this.editObjList();
  },
  methods: {
    // 如果从编辑页面过来，处理数据
    //  this.$route.params.row.name
    editObjList() {
      if (!!this.isEdit) {
        this.formObj.id = this.$route.params.row.id;
        this.formObj.name = this.$route.params.row.name;
        this.formObj.address = this.$route.params.row.address;
        this.formObj.code = this.$route.params.row.code;
        this.formObj.contact = this.$route.params.row.contact;
        this.cityName = `${this.$route.params.row.city}/${this.$route.params.row.county}/${this.$route.params.row.province}`;
        this.formObj.phone = this.$route.params.row.phone;
        this.formObj.remark = this.$route.params.row.remark;
      }
    },
    // 提交按钮时间
    async onSubmit() {
      let citys = this.cityName.split("/");
      this.formObj.province = citys[0];
      this.formObj.city = citys[1];
      this.formObj.county = citys[2];
      if (!!this.isEdit) {
        let resultUpdate = await supplierUpdateApi(this.formObj);
        console.log();
        if (resultUpdate.code === 200) {
          this.$toast.success("材料数据修改成功");
        } else {
          this.$toast.fail("材料数据修改失败");
        }
      } else {
        let result = await supplierListSaveApi(this.formObj);
        if (result.code === 200) {
          this.$toast.success("保存成功");
        } else {
          this.$toast.fail("保存失败");
        }
      }
    },
    // 获取地市
    onPickCity(arr) {
      this.cityName = arr
        .reduce(function (res, item) {
          res.push(item.name);
          return res;
        }, [])
        .join("/");
      this.cityShow = false;
    },
  },
};
</script>
